// 拿到此时商品的 pid
let paramsObj = new URLSearchParams(location.search);
let pid = paramsObj.get("pid");
if (paramsObj.has("pid")) {
  axios.get(produtDetailAPI, { params: { id: pid } }).then((res) => {
    console.log(res.data);
    let pObj = res.data.data;
    let dt = document.querySelector("dt");
    let dds = document.querySelectorAll("dd");
    let imgs = document.querySelectorAll(".box-left img");
    dt.innerHTML = pObj.pname;
    dds[0].innerHTML += pObj.pdesc;
    dds[1].innerHTML += pObj.pprice;
    imgs.forEach((v) => {
      v.src = pObj.pimg;
    });
  });
}
// 获取输入框的值，不让其为负
let ipt = document.querySelector("#pnum");
ipt.oninput = function () {
  if (this.value <= 1) {
    this.value = 1;
  }
};
// 加入购物车事件
let cart = document.querySelector(".cart");
let username = localStorage.getItem("username")
cart.onclick = function () {
  if(username){
    let pnum = document.querySelector("#pnum").value;
    let uid = localStorage.getItem("uid");
    let params = { pnum, uid, pid };
    axios.get(cartAddAPI, { params }).then((res)=>{
        console.log(res.data);
        document.querySelector(".sp1").style.display = "block";
    });
  }else{
    alert("请登录")
    location.href = "login.html"
  }
  
};
cart.onmouseout = function(){
    document.querySelector(".sp1").style.display = "none";
}
// 我的购物车
let mecart = document.querySelector(".mecart");
mecart.onclick = function(){
    location.href = "shoppingCart.html"
}

// 放大镜 
let smallDiv = document.querySelector(".top");
let bigDiv = document.querySelector(".visibleArea");
let maskDiv = document.querySelector(".mask");
let fdj = document.querySelector(".box-left");
// 移入移出
smallDiv.onmouseenter = function () {
    bigDiv.style.display = "block";
    maskDiv.style.display = "block";
};
smallDiv.onmouseleave = function () {
    bigDiv.style.display = "none";
    maskDiv.style.display = "none";
};
// 控制mask 的移动
smallDiv.onmousemove = function (evt) {
    // 鼠标坐标
    let mouseX = evt.pageX;
    let mouseY = evt.pageY;
    // 鼠标在 small 内的坐标 = 鼠标的坐标 - fdj.offsetLeft
    let offsetX = mouseX - fdj.offsetLeft;
    let offsetY = mouseY - fdj.offsetTop;
    // 根据 鼠标在small 内的坐标 计算出 mask 的坐标
    let maskX = offsetX -  maskDiv.offsetWidth / 2;
    let maskY = offsetY -  maskDiv.offsetHeight / 2;

    // 边界处理
    if (maskX < 0) {
    maskX = 0;
    }
    if (maskY < 0) {
    maskY = 0;
    }
    if (maskY > smallDiv.offsetHeight - maskDiv.offsetHeight) {
    maskY = smallDiv.offsetHeight - maskDiv.offsetHeight;
    }
    if (maskX > smallDiv.offsetWidth - maskDiv.offsetWidth) {
    maskX = smallDiv.offsetWidth - maskDiv.offsetWidth;
    }
    // 让其移动
    maskDiv.style.left = maskX + "px";
    maskDiv.style.top = maskY + "px";

    // 调整  mask宽度 / smallDiv的宽度 =  bigDiv的宽度 /bigImg 的宽度
    //  bigImg 的宽度 = bigDiv的宽度 *smallDiv的宽度 /mask宽度
    let bigImgWidth =
         (bigDiv.offsetWidth * smallDiv.offsetWidth) / maskDiv.offsetWidth;
    let bigImg = document.querySelector(".bigbox");
    // bigImg.style.width = bigImgWidth + "px";

    // bigimg 让其移动 因为是反向的，所以用负数
    let bigImgX = (-maskX * bigImg.offsetWidth) / smallDiv.offsetWidth;
    let bigImgY = (-maskY * bigImg.offsetWidth) / smallDiv.offsetWidth;
    bigImg.style.left = bigImgX + "px";
    bigImg.style.top = bigImgY + "px";
    }
